<template>
	<view class="content">
		<view class="search">
		  <image class="search-icon" src="/static/index/search-icon.png"></image>
		  <input class="search-input" placeholder="搜索">
		</view>
		<view class="navbar">
			<scroll-view scroll-x style="display:flex; white-space: nowrap; margin-right:30upx; width:90%; margin-top:30upx;">
				<view v-for="(item, index) in cateList" :key="item.id" class="nav-item" :class="{current: cateId === item.id}" @click="changeCate(item)">
					{{item.fieldName}}
				</view>
			</scroll-view>

			<text class="cate-item yticon icon-fenlei1" @click="gotoDataPage"></text>
		</view>
		<view class="goods-list">
			<view
				v-for="(item, index) in goodsList" :key="index"
				class="goods-item"
				@click="navToDetailPage(item)"
			>
				<view class="image-wrapper">
					<image :src="item.iconUrl" mode="aspectFill"></image>
				</view>
				<view style="padding: 5px;">
					<text class="title clamp">{{item.name||"未命名"}}</text>
					<text class="data clamp">{{item.updateTime}}</text>
					<view class="price-box">
						<text class="price">{{ item.priceList[0] !== undefined && item.priceList[0].price !== undefined ? `￥${item.priceList[0].price.toFixed(2)}` : '面议'}}</text>
						<image class="bag-icon" src="/static/index/bag.png"></image>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>

		<view class="cate-mask" :class="cateMaskState===0 ? 'none' : cateMaskState===1 ? 'show' : ''" @click="toggleCateMask">
			<view class="cate-content" @click.stop.prevent="stopPrevent" @touchmove.stop.prevent="stopPrevent">
				<scroll-view scroll-y class="cate-list">
					<view v-for="item in cateList" :key="item.id">
						<view class="cate-item b-b two">{{item.name}}</view>
						<view
							v-for="tItem in item.child" :key="tItem.id"
							class="cate-item b-b"
							:class="{active: tItem.id==cateId}"
							@click="changeCate(tItem)">
							{{tItem.name}}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
  import {getCategory} from "@/api/category";
  import {getPublicProduct} from "@/api/public";
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				cateMaskState: 0, //分类面板展开状态
				headerPosition:"fixed",
				headerTop:"0px",
				loadingType: 'more', //加载更多状态
				cateId: 0, //已选三级分类id
				priceOrder: 0, //1 价格从低到高 2价格从高到低
				cateList: [],
				goodsList: [],
			};
		},

		onLoad(options){
			// #ifdef H5
			this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight+'px';
			// #endif
			this.loadCateList();
			this.loadData();
		},
		onPageScroll(e){
			//兼容iOS端下拉时顶部漂移
			if(e.scrollTop>=0){
				this.headerPosition = "fixed";
			}else{
				this.headerPosition = "absolute";
			}
		},
		//下拉刷新
		onPullDownRefresh(){
			this.loadData('refresh');
		},
		//加载更多
		onReachBottom(){
			this.loadData();
		},
		methods: {
			//加载分类
			// async loadCateList(fid, sid){
			// 	let list = await this.$api.json('cateList');
			// 	let cateList = list.filter(item=>item.pid == fid);
			//
			// 	cateList.forEach(item=>{
			// 		let tempList = list.filter(val=>val.pid == item.id);
			// 		item.child = tempList;
			// 	})
			// 	this.cateList = cateList;
			// },
      async  loadCateList(){
        getCategory().then(res=>{
          console.log('res', res)
          this.cateList = res.data;
          // this.slist = res.data[0].children;
          // this.tlist = res.data[0].children[0].children;
        })
      },

			// //加载商品 ，带下拉刷新和上滑加载
			// async loadData(type='add', loading) {
			// 	//没有更多直接返回
			// 	if(type === 'add'){
			// 		if(this.loadingType === 'nomore'){
			// 			return;
			// 		}
			// 		this.loadingType = 'loading';
			// 	}else{
			// 		this.loadingType = 'more'
			// 	}
			//
			// 	let res = await getPublicProduct({pageSize:10,pageNum:0});
			// 	if(type === 'refresh'){
			// 		this.goodsList = [];
			// 	}
			//
			// 	this.goodsList = res.rows.concat(this.goodsList)
			// 	//判断是否还有下一页，有是more  没有是nomore(测试数据判断大于20就没有了)
			// 	this.loadingType  = this.goodsList.length > 10 ? 'nomore' : 'more';
			// 	if(type === 'refresh'){
			// 		if(loading == 1){
			// 			uni.hideLoading()
			// 		}else{
			// 			uni.stopPullDownRefresh();
			// 		}
			// 	}
			// },
      // 加载商品，带下拉刷新和上滑加载
      async loadData(type = 'add', loading) {
        // 如果正在加载更多或已经没有更多数据，则直接返回
        if (type === 'add' && this.loadingType === 'loading') {
          return;
        }

        // 根据加载类型设置 loadingType
        if (type === 'add') {
          this.loadingType = 'loading';
        } else {
          this.loadingType = 'more';
        }
        try {
          let res;
          let pageNum;

          if (type === 'refresh') {
            // 下拉刷新时重置页码为 0，清空商品列表
            pageNum = 0;
            this.goodsList = [];
          } else {
            // 上滑加载时，页码加一
            pageNum = Math.ceil(this.goodsList.length / 10); // 假设每页 10 条数据
          }

          // 发起请求获取商品数据
          res = await getPublicProduct({ pageSize: 10, pageNum });
					console.log('商品数据res.rows', res.rows);

          // 将获取到的商品数据拼接到商品列表
          this.goodsList = this.goodsList.concat(res.rows);

          // 判断是否还有下一页数据
          if (res.rows.length < 10) {
            this.loadingType = 'nomore'; // 如果返回的数据条数小于请求的 pageSize，说明没有更多数据
          } else {
            this.loadingType = 'more'; // 还有更多数据可以加载
          }

          // 根据加载类型结束加载状态（下拉刷新时处理加载提示）
          if (type === 'refresh') {
            if (loading === 1) {
              uni.hideLoading();
            } else {
              uni.stopPullDownRefresh();
            }
          }
        } catch (error) {
          console.error('加载商品数据出错：', error);
          this.loadingType = 'more'; // 出错时重置加载状态为可加载更多
        }
      },

      //筛选点击
			tabClick(index){
				if(this.filterIndex === index && index !== 2){
					return;
				}
				this.filterIndex = index;
				if(index === 2){
					this.priceOrder = this.priceOrder === 1 ? 2: 1;
				}else{
					this.priceOrder = 0;
				}
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				})
				this.loadData('refresh', 1);
				uni.showLoading({
					title: '正在加载'
				})
			},
			//显示分类面板
			toggleCateMask(type){
				let timer = type === 'show' ? 10 : 300;
				let	state = type === 'show' ? 1 : 0;
				this.cateMaskState = 2;
				setTimeout(()=>{
					this.cateMaskState = state;
				}, timer)
			},
			//分类点击
			changeCate(item){
						// 设置选中的分类 id
						this.cateId = item.id;
						// 加载对应的商品数据
						this.loadData();
					},
					//跳转到 data 页面
					gotoDataPage() {
						uni.navigateTo({
							url: '/pages/data/data'
						})
					},
					//详情页跳转

			//详情
			navToDetailPage(item){
        console.log('item', item)
				let id = item.id;
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				})
			},
			stopPrevent(){}
		},
	}
</script>

<style lang="scss">
	page, .content{
		//background: $page-color-base;
	}
	.search {
	  width: 100%;
	  padding:0 10px;
	  box-sizing: border-box;
	  border: 2px solid #5f5e79; /* 设置边框颜色 */
	  border-radius: 18px;
	  display: flex;
	  align-items: center;
	}

	.search-input {
	  flex: 1;
	  height: 40px;
	  border: none;
	  background: transparent;
	  padding: 0 10px;
	  box-sizing: border-box;
	  color: white;
	  font-size: 14px;
	}

	.search-icon {
	  width: 17px;
	  height: 17px;
	  margin-right: 10px;
	}
	.bag-icon {
	  width: 24px;
	  height: 24px;
	  margin-right: 8upx;
	}
	.content{
		padding: 20upx;
	}

	.navbar{
		// position: fixed;
		// left: 0;
		// top: var(--window-top);
		display: flex;
		width: 100%;
		height: 80upx;
		//background: #fff;
		box-shadow: 0 2upx 10upx rgba(0,0,0,.06);
		z-index: 10;
		margin-bottom: 20upx;
		.nav-item{
			display:inline-block;
			width:130upx;

			// flex: 1;
			// display: flex;
			// justify-content: center;
			// align-items: center;
			height: 100%;
			line-height:30upx;
			text-align:center;
			font-size: 30upx;
			color: #9392af;
			position: relative;
			overflow: hidden;
			white-space: nowrap;
			&.current{
				color: #fff;
				font-size: $font-lg +5upx;
				&:after{
					content: '';
					position: absolute;
					left: 50%;
					bottom: 2%;
					transform: translateX(-50%);
					width: 50upx;
					height: 20upx;
					border-radius: 100%;
					border-bottom: 3px solid #00aaff;
				}
			}
		}
		.p-box{
			display: flex;
			flex-direction: column;
			.yticon{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30upx;
				height: 14upx;
				line-height: 1;
				margin-left: 4upx;
				font-size: 26upx;
				color: #888;
				&.active{
					color: $base-color;
				}
			}
			.xia{
				transform: scaleY(-1);
			}
		}
		.cate-item{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			width: 80upx;
			position: relative;
			font-size: 44upx;
			color: #fff;
			&:after{
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				border-left: 1px solid #ddd;
				width: 0;
				height: 36upx;
			}
		}
	}

	/* 分类 */
	.cate-mask{
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0,0,0,0);
		z-index: 95;
		transition: .3s;

		.cate-content{
			width: 630upx;
			height: 100%;
			background: #fff;
			float:right;
			transform: translateX(100%);
			transition: .3s;
		}
		&.none{
			display: none;
		}
		&.show{
			background: rgba(0,0,0,.4);

			.cate-content{
				transform: translateX(0);
			}
		}
	}
	.cate-list{
		display: flex;
		flex-direction: column;
		height: 100%;
		.cate-item{
			display: flex;
			align-items: center;
			height: 90upx;
			padding-left: 30upx;
 			font-size: 28upx;
			color: #555;
			position: relative;
		}
		.two{
			height: 64upx;
			color: #303133;
			font-size: 30upx;
			//background: #f8f8f8;
		}
		.active{
			color: $base-color;
		}
	}

	/* 商品列表 */
	.goods-list{
		display:flex;
		flex-wrap:wrap;

		//background: #fff;
		.goods-item{
			display:flex;
			flex-direction: column;
			width: 48%;
			//padding-bottom: 20upx;
			margin-bottom: 10px;
			background-color: #2f3045;
			&:nth-child(2n+1){
				margin-right: 4%;
			}
		}
		.image-wrapper{
			width: 100%;
			height: 330upx;
			border-radius: 3px;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		.title{
			font-size: 30rpx;
			color: #303133;
			line-height: 60rpx;
			color: #fff;
		}
		.data{
			font-size:12px;
			color:#797a87;
		}
		.price-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10upx;
			font-size: 24upx;
			color: $font-color-light;
		}
		.price{
			font-size: $font-lg;
			color: #fbdb92;
			line-height: 1;
			//&:before{
			//	content: '￥';
			//	font-size: 38upx;
			//}
		}
	}


</style>
